<template>
    <u-popup v-model="show" :mask-close-able="flase" mode="center" width="96%" height="600rpx">
        <view class="popup">
          <text class="title">领取记录</text>
          <text v-if="datas.length == 0" class="popupEmptyText">您暂未领取奖励</text>
          <view v-else>
            <u-table class="table">
              <u-tr>
                <u-th>奖品</u-th>
                <u-th>领取时间</u-th>
                <u-th>状态</u-th>
              </u-tr>
              <u-tr v-for="(item, index) in datas" :key="index">
                <u-td>{{ item.prizeName }}</u-td>
                <u-td>{{ item.createTime }}</u-td>
                <u-td>已领取</u-td>
              </u-tr>
            </u-table>
            <text class="tipText">注：领取奖励后，将会有工作人员与您取得联系并发放奖品</text>
          </view>
          <u-button class="popupBtn" type="primary" @click="handleClick">确定</u-button>
        </view>
      </u-popup>
  </template>
  
  <script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      datas: {
        type: Array,
        default: [],
      },
    },
    watch: {
      show(newValue, oldValue) {
          console.log("🚀 ~ show ~ newValue:", newValue)
          
        if (newValue) {
          this.isShow = newValue;
        }
      },
    },
    data() {
      return {
        isShow: false,
      };
    },
  
    methods: {
      handleClick() {
        this.$emit('didClick');
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    .title {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #454b5b;
      margin-top: 70rpx;
      margin-bottom: 50rpx;
    }
  
    .table {
      margin-top: 43rpx;
      width: 90%;
    }
    .tipText {
      margin: 10rpx 35rpx;
      color: #b3b2b2;
      font-size: 24rpx;
    }
  
    .popupBtn {
      position: absolute;
      bottom: 40rpx;
      left: 52rpx;
      right: 52rpx;
    }
  
    .popupEmptyText {
      margin: 77rpx;
    }
  }
  </style>
  